{% extends "base.html" %}

{% block title %}创建聊天室 - SteHub{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8 col-lg-6">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0"><i class="fas fa-plus me-2"></i>创建聊天室</h4>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('chat.create_room') }}">
                    <div class="mb-3">
                        <label for="name" class="form-label">房间名称</label>
                        <input type="text" class="form-control" id="name" name="name" 
                               required maxlength="50" placeholder="请输入房间名称">
                        <div class="form-text">房间名称将显示在聊天室列表中</div>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">房间描述</label>
                        <textarea class="form-control" id="description" name="description" 
                                  rows="3" maxlength="200" placeholder="请输入房间描述（可选）"></textarea>
                        <div class="form-text">简要描述房间的用途或主题</div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_members" class="form-label">最大成员数</label>
                                <input type="number" class="form-control" id="max_members" name="max_members" 
                                       value="50" min="2" max="500">
                                <div class="form-text">设置房间允许的最大成员数量</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">房间类型</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="is_public" 
                                           id="public" value="true" checked>
                                    <label class="form-check-label" for="public">
                                        <i class="fas fa-globe me-1 text-success"></i>公共房间
                                    </label>
                                    <small class="form-text text-muted d-block">
                                        任何人都可以查看和加入
                                    </small>
                                </div>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="radio" name="is_public" 
                                           id="private" value="false">
                                    <label class="form-check-label" for="private">
                                        <i class="fas fa-lock me-1 text-warning"></i>私有房间
                                    </label>
                                    <small class="form-text text-muted d-block">
                                        只有受邀用户才能加入
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 高级设置（可折叠） -->
                    <div class="mb-3">
                        <a class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" href="#advancedSettings">
                            <i class="fas fa-cog me-1"></i>高级设置
                        </a>
                        
                        <div class="collapse mt-3" id="advancedSettings">
                            <div class="card card-body">
                                <div class="mb-3">
                                    <label class="form-label">房间权限</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="allow_guest" id="allow_guest">
                                        <label class="form-check-label" for="allow_guest">
                                            允许游客查看（不登录）
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="allow_invite" id="allow_invite" checked>
                                        <label class="form-check-label" for="allow_invite">
                                            允许成员邀请其他人
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="room_topic" class="form-label">房间主题标签</label>
                                    <input type="text" class="form-control" id="room_topic" name="room_topic" 
                                           placeholder="例如：学习、编程、游戏">
                                    <div class="form-text">用逗号分隔多个标签</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>创建聊天室
                        </button>
                        <a href="{{ url_for('chat.index') }}" class="btn btn-outline-secondary">
                            取消
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- 创建指南 -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-lightbulb me-2"></i>创建指南</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>房间命名建议</h6>
                        <ul class="small text-muted">
                            <li>名称简洁明了</li>
                            <li>体现房间主题</li>
                            <li>避免使用特殊字符</li>
                            <li>长度适中（2-20字）</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>房间类型说明</h6>
                        <ul class="small text-muted">
                            <li><strong>公共房间</strong>：所有人都可加入</li>
                            <li><strong>私有房间</strong>：需要邀请链接</li>
                            <li>创建后可以修改设置</li>
                        </ul>
                    </div>
                </div>
                
                <div class="alert alert-info mt-3">
                    <h6><i class="fas fa-info-circle me-2"></i>温馨提示</h6>
                    <p class="mb-0 small">作为房间创建者，您将自动成为房间管理员，可以管理成员和房间设置。</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const nameInput = document.getElementById('name');
    const descriptionInput = document.getElementById('description');
    const maxMembersInput = document.getElementById('max_members');
    
    // 实时字符计数
    function updateCharCount(input, maxLength) {
        const count = input.value.length;
        const formText = input.parentNode.querySelector('.form-text');
        if (formText) {
            formText.textContent = `已输入 ${count}/${maxLength} 个字符`;
            
            if (count > maxLength * 0.8) {
                formText.classList.add('text-warning');
            } else {
                formText.classList.remove('text-warning');
            }
        }
    }
    
    nameInput.addEventListener('input', function() {
        updateCharCount(this, 50);
    });
    
    descriptionInput.addEventListener('input', function() {
        updateCharCount(this, 200);
    });
    
    // 初始化计数显示
    updateCharCount(nameInput, 50);
    updateCharCount(descriptionInput, 200);
    
    // 表单验证
    document.querySelector('form').addEventListener('submit', function(e) {
        const name = nameInput.value.trim();
        
        if (!name) {
            e.preventDefault();
            alert('请输入房间名称');
            nameInput.focus();
            return;
        }
        
        if (name.length < 2) {
            e.preventDefault();
            alert('房间名称至少需要2个字符');
            nameInput.focus();
            return;
        }
        
        if (maxMembersInput.value < 2) {
            e.preventDefault();
            alert('最大成员数至少为2人');
            maxMembersInput.focus();
            return;
        }
    });
});
</script>
{% endblock %}